import type { FormItemConfigList } from "@/components/form";
import { FormSelect } from "@/components/form";
import type {
  ListApiParams,
  ListPageInnerInjectInfo,
} from "@/components/list-page";
import { ElButton } from "element-plus";
import type {
  ElTableColumnProps,
  TableApiParams,
  TableApiResult,
} from "@/components/table";

export interface FormData {
  k1: string;
  k2: number;
  k3: string;
  k4: string;
  k5: string;
}

export interface SomeFormatFormData {
  k1: never;
  k10: boolean;
}

export const list: FormItemConfigList<FormData, SomeFormatFormData> = [
  {
    key: "k1",
    label: "字段1",
    beLink: {
      key: "k4",
      getValue: (value) => {
        return value;
      },
    },
    extra: {
      isInput: true,
    },
  },
  {
    key: "k2",
    label: "字段2",
    props: {
      options: Array(10)
        .fill(0)
        .map((_, index) => ({
          label: `选项${index}`,
          value: index,
        })),
    },
    render: FormSelect,
    extra: {
      isSelect: true,
    },
  },
  {
    key: "k3",
    label: "字段3",
    extra: {
      isSelect: true,
    },
  },
  {
    key: "k4",
    label: "字段4",
    props: () => {
      return {
        style: {
          background: "#f4f4f4",
          height: "100%",
          width: "100%",
        },
      };
    },
    stringify: (value) => {
      return `格式化之后的：${value}`;
    },
    render: ({ modelValue, onTriggerChangeLink }) =>
      h(
        "div",
        {
          onClick: () => {
            console.log("click");
            onTriggerChangeLink?.(modelValue, `附加信息${Date.now()}`);
          },
        },
        modelValue,
      ),
    beLink: {
      key: "k5",
      getValue: (_1, ownValue, attachInfo) => {
        // console.log(75, "attachInfo", attachInfo);
        if (attachInfo) {
          return attachInfo;
        } else {
          return ownValue;
        }
      },
    },
  },
  {
    key: "k5",
    label: "字段5",
    props: () => {
      return {
        style: {
          background: "#f4f4f4",
          height: "100%",
          width: "100%",
        },
      };
    },
    render: (props) => h("div", props.modelValue),
  },
];

export interface TestDetail {
  id: number;
  k1: string;
  k2: number;
  k3: string;
  k4: string;
}

export const injectInfo = {
  goToDetail() {
    console.log("去详情");
  },
};

export const columns: ElTableColumnProps<
  TestDetail,
  ListPageInnerInjectInfo<FormData, typeof injectInfo>
>[] = [
  {
    type: "selection",
    label: "选择",
  },
  {
    type: "index",
    label: "序号",
  },
  {
    type: "expand",
    label: "展开",
    prop: "EXTEND_TEST",
  },
  {
    prop: "k1",
    label: "字段1",
  },
  {
    prop: "k2",
    label: "字段2",
    render: (props) => {
      return h("div", () => [
        h(
          ElButton,
          {
            onClick: (e: Event) => {
              e.preventDefault();
              props.injectInfo.goToDetail();
            },
          },
          "去详情",
        ),
        h(
          ElButton,
          {
            onClick: (e: Event) => {
              e.preventDefault();
              props.exposeInfo.refresh();
            },
          },
          "去刷新",
        ),
        h(
          ElButton,
          {
            onClick: (e: Event) => {
              e.preventDefault();
              props.exposeInfo.reload();
            },
          },
          "去重载",
        ),
        h(
          ElButton,
          {
            onClick: (e: Event) => {
              e.preventDefault();
              props.injectInfo.triggerReset();
            },
          },
          "重置查询",
        ),
        h(
          ElButton,
          {
            onClick: (e: Event) => {
              e.preventDefault();
              props.injectInfo.update("k1", "更新k1");
              props.injectInfo.triggerSearch();
            },
          },
          "更新k1并触发查询",
        ),
      ]);
    },
    headerRender: (props) => {
      console.log("headerRender", props.column);
      return h("div", `通过headerRender自定义`);
    },
  },
  {
    prop: "k3",
    label: "字段3",
  },
  {
    prop: "k4",
    label: "字段4",
  },
  {
    prop: "OPERATE",
    label: "操作",
    fixed: "right",
  },
];

export const staticQuery = {
  type: "static",
};

export const showOperation = true;

export const api = (params: ListApiParams<typeof list, typeof staticQuery>) => {
  const { pageSize, currentPage } = params;
  let i = pageSize * (currentPage - 1);
  console.warn("发起请求", params);
  return new Promise<TableApiResult<TestDetail>>((resolve) => {
    setTimeout(
      () => {
        resolve({
          list: Array(pageSize)
            .fill(0)
            .map((_, index) => {
              const ii = i + index + 1;
              return Array(4)
                .fill(0)
                .reduce(
                  (acc, _, index) => {
                    acc[`k${index + 1}`] = `第${ii}条-字段${index + 1}`;
                    return acc;
                  },
                  {
                    id: ii,
                  },
                );
            }),
          total: 100,
        });
      },
      100 + Math.random() * 100,
    );
  });
};

/**
 * page1Api不传递泛型演示
 * !!! page1Api是传递泛型的，此处as断言只不过是演示如果不传递泛型的情况
 */
export const page1Api = api as (
  params: TableApiParams,
) => Promise<TableApiResult<TestDetail>>;

/**
 * page3Api不传递泛型演示
 * !!! page3Api是传递泛型的，此处as断言只不过是演示如果不传递泛型的情况
 */
export const page3Api = api as unknown as (
  params: TableApiParams,
) => Promise<TableApiResult>;

/**
 * list不传递泛型演示
 * !!! list是传递泛型的，此处as断言只不过是演示如果不传递泛型的情况
 */
export const page3List = list as FormItemConfigList;

/**
 * columns不传递泛型演示
 * !!! columns是传递泛型的，此处as断言只不过是演示如果不传递泛型的情况
 */
export const page3Columns = columns as ElTableColumnProps[];
